<template>
	<div class="login-main">
		<div class="login-header">
			<van-icon name="arrow-left" @click="comeBack('/')" />
			<img src="@/assets/image/lang.png" alt=""  @click="comeBack('/lang')">
		</div>
		<!--    注册-->
		<div class="title">{{$t('h.A008')}}</div>
		<div class="login-method">
			<!--      <div class="box">手机号</div>-->
			<!--      <div class="box active">邮箱</div>-->
		</div>
		<div class="form">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
				<!--        邮箱-->
				<el-form-item class="margin-top-20" :label="$t('h.A002')" prop="email">
					<!--          请输入邮箱-->
					<el-input v-model="ruleForm.email" :placeholder="$t('h.A003')"></el-input>
				</el-form-item>
				<!--        用户名-->
				<el-form-item class="margin-top-20" :label="$t('h.A009')" prop="username">
					<!--          请输入用户名-->
					<el-input v-model="ruleForm.username" :placeholder="$t('h.A010')"></el-input>
				</el-form-item>

				<!--        密码-->
				<el-form-item class="margin-top-20" :label="$t('h.A011')" prop="pass">
					<!--          请输入密码-->
					<el-input show-password type="password" v-model="ruleForm.password" :placeholder="$t('h.A012')"
						autocomplete="off"></el-input>
				</el-form-item>
				<!--        确认密码-->
				<el-form-item class="margin-top-20" :label="$t('h.A013')" prop="checkPass">
					<!--          请确认密码-->
					<el-input show-password type="password" :placeholder="$t('h.A014')" v-model="ruleForm.checkPass"
						autocomplete="off"></el-input>
				</el-form-item>
				<!--        邮箱验证-->
				<el-form-item class="margin-top-20" :label="$t('h.A015')" prop="code">
					<div style="width: 100%;display: flex;justify-content: space-between">
						<el-input type="text" placeholder="" style="width: 60%" v-model="ruleForm.code"
							autocomplete="off" maxlength="4" />
						<el-button @click="getCode" v-if="!isDisabled" type="primary"
							style="width:30%;background: #002FFF;border: 1px solid transparent">
							{{ $t('h.A016') }}
						</el-button>
						<van-count-down v-else style="width: 30%;" @finish="finish" :time="time">
							<template #default="timeData">
								<el-button disabled style="background: #999;width: 100%;border: 1px solid transparent"
									type="primary">
									<span>
										{{ timeData.seconds }}
									</span>
								</el-button>
							</template>
						</van-count-down>

					</div>
				</el-form-item>
				<el-form-item>
					<!--          注册-->
					<div @click="submitForm('ruleForm')" class="submit">{{ $t('h.A008') }}</div>
				</el-form-item>
			</el-form>

		</div>
		<div class="form-tips">
			<!--      已有账号？ 去登录-->
			{{$t('h.A017')}}？<a @click="toLogin" href="javascript:void (0)">{{ $t('h.A018') }}</a>
		</div>

		<van-popup closeable round v-model="openCountry" position="bottom" :style="{ height: '80%' }">
			<div class="content-main">
				<div class="title">选择区域码</div>
				<div class="input">
					<div class="input-label">
						<img src="@/assets/image/search-b.png" alt="">
						<input type="text" placeholder="请输入要搜索的国家名称">
					</div>
					<div class="country-list">
						<div class="item">
							<span class="left">
								<img src="@/assets/image/zh.png" alt="">
								<span>中国</span>
							</span>
							<span class="right">+86</span>
						</div>
						<div class="item">
							<span class="left">
								<img src="@/assets/image/zh.png" alt="">
								<span>中国</span>
							</span>
							<span class="right">+86</span>
						</div>
						<div class="item">
							<span class="left">
								<img src="@/assets/image/zh.png" alt="">
								<span>中国</span>
							</span>
							<span class="right">+86</span>
						</div>
						<div class="item">
							<span class="left">
								<img src="@/assets/image/zh.png" alt="">
								<span>中国</span>
							</span>
							<span class="right">+86</span>
						</div>
					</div>
				</div>
			</div>
		</van-popup>

	</div>
</template>

<script>
	import {
		sendCode
	} from "@/api/apiFox";
	import {
		Toast
	} from "vant";
	import {
		getItem
	} from "@/plugins";

	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error(this.$t('h.A005')));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					// 请再次输入密码
					callback(new Error(this.$t('h.A019')));
				} else if (value !== this.ruleForm.password) {
					// 两次输入密码不一致
					callback(new Error(this.$t('h.A020')));
				} else {
					callback();
				}
			};
			return {
				openCountry: false,
				time: 60 * 1000,
				isDisabled: false,
				ruleForm: {
					username: '',
					password: '',
					checkPass: '',
					email: '',
					code: ''
				},
				rules: {
					// 请输入用户名
					username: [{
						required: true,
						message: this.$t('h.A010'),
						trigger: 'blur'
					}],
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					// 请输入邮箱
					email: [{
						required: true,
						message: this.$t('h.A003'),
						trigger: 'blur'
					}],
					// 邮箱验证
					code: [{
						required: true,
						message: this.$t('h.A015'),
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$store.dispatch('RegSetToken', this.ruleForm).then(res => {

							Toast.loading({
								forbidClick: true
							});
							// this.$router.push('/')
							if (getItem('path')) {
								this.$router.push(getItem('path'))
							} else {
								this.$router.push('/mine')
							}
						}).catch(err => {
							Toast.fail(err.msg)
						})

					} else {
						return false;
					}
				});
			},
			finish() {
				this.isDisabled = false
			},
			getCode() {
				if (this.ruleForm.email === '') {
					Toast.fail(this.$t('h.A003'))
					return;
				}
        Toast.loading({forbidClick: true});
				sendCode({
					email: this.ruleForm.email,
					event: 'register'
				}).then(res => {
          Toast.clear();
					Toast.success(this.$t('h.A021'))
					this.isDisabled = true
				}).catch(err => {
          Toast.clear();
          Toast.fail(err.msg)
        })
			},

			toLogin() {
				this.$router.push('/login')
			},
			comeBack(item) {
				this.$router.push(item)
			},
			chekckCountry() {
				this.openCountry = true
			}
		}
	}
</script>


<style scoped lang="scss">
	.margin-top-20 {
		margin-top: -10px;
	}

	.login-main {
		width: 100%;
		padding: 3% 4%;
		box-sizing: border-box;

		.login-header {
			width: 100%;
			height: 40px;
			background: #fff;
			font-size: 24px;
			display: flex;
			justify-content: space-between;

			box-sizing: border-box;

			img {
				height: 22px;
			}
		}

		.title {
			width: 100%;
			margin-top: 10px;
			font-weight: 600;
			font-size: 28px;
		}

		.login-method {
			width: 100%;
			margin-top: 20px;
			display: flex;

			.box {
				padding: 8px 30px;
				background: #eee;
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				color: #333;
				border-radius: 5px;
				margin-right: 15px;
			}

			.active {
				background: #002FFF;
				color: #fff;
			}
		}

		.form {
			width: 100%;
			margin-top: 20px;
			margin-bottom: 20px;

			.submit {
				width: 100%;
				display: block;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				text-align: center;
				color: #fff;
				background: #002FFF;
				border-radius: 5px;
			}
		}

		.form-tips {
			width: 100%;
			font-size: 14px;
			text-align: center;

			a {
				font-size: 14px;
				color: #4aa8ff;
			}
		}
	}

	.content-main {
		width: 100%;

		.title {
			width: 100%;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
		}

		.input {
			width: 100%;
			height: 30px;
			padding: 0 10px;
			box-sizing: border-box;

			.input-label {
				width: 100%;
				height: 30px;
				background: #f6f6f6;
				display: flex;
				align-items: center;
				padding: 0 3%;
				box-sizing: border-box;
				font-size: 12px;

				img {
					margin-right: 10px;
					height: 14px;
				}
			}

			.country-list {
				width: 100%;
				padding: 0 3%;
				box-sizing: border-box;
				margin-top: 30px;

				.item {
					width: 100%;
					height: 30px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 15px;

					.left {
						color: #333333;
						font-size: 12px;
						display: flex;
						align-items: center;

						img {
							margin-right: 10px;
							height: 18px;
						}
					}

					.right {
						font-size: 14px;
						color: #666;
					}
				}
			}
		}
	}
</style>
